<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初识vue</title>
</head>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<body>
<!--

1. v-if : 销毁渲染 , 占用资源
2. v-show : 对属性的设置, display: none 隐藏
3. v-model : 双向绑定数据, 一般用于表单
4. v-bind:   可简写:title , 单向数据
5. computed : 计算属性, 利用缓存的机制, 提高效率, 减少资源占用
6. 修饰符的作用: 对输入值的限制约束 , 按键响应 等等
7. v-for 遍历数据
8. v-text ，v-html：区别于  v-html显而易见可以解析 html标签元素

-->
<div id="app">
    <details>
        <summary>插值表达式</summary>
        <p>{{ message }}<!-- 插值表达式  --></p>
        <p>{{ printT() }}</p>
        <p>{{ computedPrint }} </p><!--  计算属性属于属性，非函数，具有缓存性 ,可以看到连续执行了3次至只加了1 -->
        <p>{{ computedPrint }} </p><!--  计算属性属于属性，非函数  -->
    </details>

    <details>
        <summary>内容指令</summary>
        <!--  内容指令  -->
        <p v-text="htmlContent"></p><!--不能解析html内容-->
        <p v-html="htmlContent"></p><!--可以解析html内容-->
    </details>

    <details>
        <summary>渲染指令</summary>
        <!--  渲染指令  -->
        <p v-for="item in 5">这是测试内容</p><!-- 可以看到在页面渲染了5个指定内容 -->
        <p v-for="item in arr">{{ item }}</p><!-- 渲染了数组中的每个元素 -->

        <details>
            <summary>渲染数组元素</summary>
            <!-- 渲染了数组中的每个元素，且可指定item、key和index，其中数组中的key为下标,item为下标对应的值 -->
            <p v-for="(item,key,index) in arr">{{ key }}{{ item }}</p>
        </details>

        <details>
            <summary>渲染数组对象</summary>
            <!--   渲染数组对象     -->
            <p v-for="(item,key,index) in arrObj">key的值是：{{ item }}
                key的属性名是：{{ key }}
                属性的下标index的值是：{{ index }}</p>
        </details>

        <!--创建或销毁指令-->
        <details open>
            <summary>创建或销毁指令</summary>
            <!-- true为创建，反之销毁 可以提供一个响应式的布尔值变量进行控制-->
            <p v-if="true">测试创建或销毁指令</p>
        </details>

        <!--显隐指令-->
        <details open>
            <summary>显隐指令</summary>
            <!-- true为显示，反之隐藏 可以提供一个响应式的布尔值变量进行控制-->
            <p v-show="true">测试显示隐藏指令</p>
        </details>

    </details>

    <!--属性指令-->
    <details>
        <summary>属性指令</summary>
        <!--可指定一个响应式的具体内容变量进行控制显示-->
        <p v-bind:title="title">属性测试</p>
    </details>

    <!--事件指令-->
    <details>
        <summary>事件指令</summary>
        <!--如调用的函数无参数，可直接写函数名-->
        <button v-on:click="getE">这是一个按钮测试</button>
        <!--上述简写，一个语法糖-->
        <button @click="getE">这是一个按钮测试</button>
    </details>

    <!--表单指令-->
    <details>
        <summary>表单指令</summary>
        <!--v-model可以实现一个双向绑定的效果
        前面的是单向绑定的效果，即数据影响视图页面。
        而，双向绑定的意思是视图页面进行修改，会影响到数据，反之数据修改会影响到视图页面。
        -->
        <input type="text" v-model="inputValue">
        <p v-text="inputValue"></p>
    </details>

    <!--修饰符-->
    <details open>
        <summary>修饰符</summary>

    </details>


</div>
</body>
<script>
    const data = {//其数据
        title: "我是一个标题",
        htmlContent: "我是一个标签文本<span>我是该标签内容</span>",
        message: 'Hello Vue!',
        index: 0,
        arr: ["第一个", "第二盒", "第三个", "第四个"],
        arrObj: {name: "小明", age: 15},
        inputValue: "我是默认的值，用于测试双向绑定v-model",
    };
    const vm = new Vue({//定义一个vue实例对象
        el: '#app',//绑定到某个标签中
        data: data,
        methods: {//方法
            printT() {
                return "你好世界";
            },
            getMessage() {
                return this.message;//可通过this，访问当前methods中的方法和data中的数据;
            },
            getE() {
                console.log(this.$el);//输出当前vue对象实例中的指定属性值
                alert(this.$el);
            }
        },
        computed: {//计算属性，具有缓存性
            computedPrint() {//多次调用只会有一次结果
                console.log("输出了compted计算属性中的computedPrint函数属性");
                this.index++;
            }

        },
        watch: {//侦听器，下面函数名要与上述data中响应式数据中属性保持一直才可以。每当想修改
            /**
             * 监听指定响应式数据属性
             * @param newValue 新的值
             * @param oldValue 旧的值
             */
            message(newValue, oldValue) {//如这里的message，一旦修改了message的值，
                console.log(newValue, oldValue);
            }
        }
    });


</script>
</html>